<template>
	<div class="cr-container">
		<div class="schedule-container" v-for="(item, index) in list" :key="index">
			<div class="label"> {{ item.name }} </div>
			<div class="sc-main" :title="item.name + ':' + item.value">
				<div class="sc-inner" :style="{ width: item.rote + '%', backgroundColor: item.color }">
					<div class="sc-sport" :style="{ backgroundColor: item.color }"></div>
				</div>
			</div>
			<div class="text">{{ item.rote + '%' }}</div>
		</div>
	</div>
	<!-- <div id="myEcharts"></div> -->
</template>
<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		rateColors
	} from '../static/rateColors';
	export default defineComponent({
		setup() {
			const echarts = inject('echarts');

			const state = reactive({
				list: [],
				labelList: [],
				charts: null,
				colorList: ['#FFFF00', '#F7CE5F', '#93FF89', '#41FFFF', '#F2D6FF'],
			});
			const setData = (data) => {
				state.list = [{
						value: 29.3,
						name: '快速路',
						rote: '29.3',
						// rote:((Number(i.v) / total) * 100).toFixed(2),
						color: state.colorList[0],
					},
					{
						value: 75.4,
						name: '主干路',
						rote: '75.4',
						// rote:((Number(i.v) / total) * 100).toFixed(2),
						color: state.colorList[1],
					},
					{
						value: 63.5,
						name: '次干路',
						rote: '63.5',
						// rote:((Number(i.v) / total) * 100).toFixed(2),
						color: state.colorList[2],
					},
					{
						value: 46.6,
						name: '支路',
						rote: '46.6',
						// rote:((Number(i.v) / total) * 100).toFixed(2),
						color: state.colorList[3],
					},
				];
				state.labelList = [];
				if (data?.length) {
					let total = 0;
					data.map((i, index) => {
						total += Number(i.v);
					});
					data.map((i, index) => {
						state.labelList.push(i.k);
						const val = parseFloat(i.v * 100).toFixed(1);
						state.list.push({
							value: i.v,
							name: i.k,
							rote: ((Number(i.v) / total) * 100).toFixed(1),
							color: state.colorList[index],
						});
					});
				}
				// initCharts();
			};
			const initCharts = () => {
				const data = state.list;
				const sideData = data.map((item) => item + 4.5);
				const dom = document.getElementById('myEcharts');
				if (
					//判断是否存在echarts实例化对象,如果存在则销毁
					state.charts != null &&
					state.charts != '' &&
					state.charts != undefined
				) {
					state.charts.dispose();
				}
				state.charts = echarts.init(dom);
				const colors = rateColors;
				const option = {
					backgroundColor: 'transparent',
					tooltip: {
						show: true,
					},
					grid: {
						left: '10%',
						right: '10%',
						top: '10%',
						bottom: '10%',
					},
					xAxis: {
						nameTextStyle: {
							color: '#FFFFFF',
							padding: [0, 0, 0, 20],
						},
						data: state.labelList,
						show: true,
						type: 'category',
						axisLine: {
							show: true,
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#7E89A2',
							},
						},
						axisLabel: {
							fontSize: '0.8vw',
							margin: 20,
						},
					},
					yAxis: {
						show: true,
						splitNumber: 8,
						axisLine: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(76, 230, 231, 0.1)',
							},
						},
						axisLabel: {
							color: 'rgba(157, 207, 207, 1)',
						},
					},
					series: [{
							type: 'bar',
							barWidth: 15,
							itemStyle: {
								normal: {
									color: function(params) {
										return colors[params.dataIndex % 4];
									},
								},
							},
							label: {
								show: true,
								position: [10, -30],
								color: '#ffffff',
								fontSize: '0.8vw',
								align: 'center',
							},
							data: state.list,
						},
						{
							z: 2,
							type: 'pictorialBar',
							data: state.list,
							symbol: 'diamond',
							symbolOffset: [0, '50%'],
							symbolSize: [15, 10],
							itemStyle: {
								normal: {
									color: function(params) {
										return colors[params.dataIndex % 4];
									},
								},
							},
						},
						{
							z: 3,
							type: 'pictorialBar',
							symbolPosition: 'end',
							data: state.list,
							symbol: 'diamond',
							symbolOffset: [0, '-50%'],
							symbolSize: [15, 10],
							itemStyle: {
								normal: {
									borderWidth: 0,
									color: function(params) {
										return colors[params.dataIndex % 4].colorStops[0].color;
									},
								},
							},
						},
					],
				};
				state.charts.setOption(option);
			};
			return {
				jisuan(val) {
					return parseFloat(val).toFixed(1);
				},
				...toRefs(state),
				setData,
			};
		},
	});
</script>
<style lang="less" scoped>
	.cr-container {
		width: 100%;
		margin-top: -8px;
		padding: 1vw 1vw 1vw;
		// background: url('@/assets/images/home/case-2.png') no-repeat;
		background-size: 100% 100%;

		.label {
			width: 3.645vw;
		}

		.text {
			width: 2.604vw;
		}

		.schedule-container {
			display: flex;
			align-items: center;
			margin-bottom: 0.9375vw;

			.sc-main {
				height: 10px;
				flex-grow: 1;
				margin: 8px 10px 0;
				background-color: rgba(255, 255, 255, 0.5);
				position: relative;
				transition: all 0.5s;
				cursor: pointer;

				.sc-inner {
					position: absolute;
					left: 0;
					bottom: 8px;
					width: 0%;
					transition: all 0.5s;
					background-color: #ed7e36;
					height: 4px;
					border-top-left-radius: 70%;
					border-bottom-left-radius: 70%;
					display: flex;
					align-items: center;
					min-width: 5px;

					.sc-sport {
						position: absolute;
						right: 0;
						height: 8px;
						width: 8px;
						border-radius: 50%;
						background-color: #ed7e36;
					}

					.sc-sport::after {
						content: '';
						width: 12px;
						height: 12px;
						border: 2px solid rgba(255, 255, 255, 0.8);
						position: absolute;
						top: -2px;
						left: -2px;
						border-radius: 50%;
					}

					.sc-sport::before {
						content: '';
						width: 18px;
						height: 18px;
						border: 2px solid rgba(255, 255, 255, 0.6);
						position: absolute;
						top: -5px;
						left: -5px;
						border-radius: 50%;
					}
				}
			}

			.sc-main:hover {
				transform: scale(1.05);
			}
		}
	}

	#myEcharts {
		height: 100%;
		width: 100%;
	}
</style>